pre, pre[class*="language-"]
  padding 1.25rem 1.5rem
  margin 0.85rem 0
  overflow auto

div[class*="language-"]
  position relative
  
  .highlight-lines
    user-select none
    padding-top 1.3rem
    position absolute
    top 0
    left 0
    width 100%
    line-height 1.4
    .highlighted
      background-color rgba(0, 0, 0, 0.5)
  pre, pre[class*="language-"]
    position relative
    z-index 1
  &::before
    position absolute
    z-index 3
    top 0.8em
    right 1em
    font-size 0.75rem
    color rgba(255, 255, 255, 0.4)
  &:not(.line-numbers-mode)
    .line-numbers-wrapper
      display none
  &.line-numbers-mode
    .highlight-lines .highlighted
        position relative
        &:before
          content ''
          position absolute
          z-index 3
          left 0
          top 0
          display block
          width 3.5rem
          height 100%
    pre
      padding-left 3.5rem + 1 rem
      vertical-align middle
      z-index 0
      line-height 1.6
    .line-numbers-wrapper
      position absolute
      top 0
      width 3.5rem
      text-align center
      color rgba(255, 255, 255, 0.3)
      padding 1.4rem 0
      line-height 1.4
      br
        user-select none
      .line-number
        position relative
        z-index 1
        user-select none
        font-size 0.85em
    &::after
      content ''
      position absolute
      z-index 0
      top 0
      left 0
      width: 3.5rem;
      height 100%
      border-radius 6px 0 0 6px
      border-right 1px solid rgba(0, 0, 0, 66%)
      background-color $codeBgColor
code, kbd, pre, samp
  font-family: $font-code
  background-color: #fff5f5;
  color: #ff502c;
  font-size: 0.9em;
  padding: .065em .4em;

  code, kbd {
    display: inline;
    margin: 0 0.3em;
    padding: .125em .25em;
    box-shadow: none;
  }

pre,
pre[class*="language-"] {
  border-radius: 6px;
  padding: 1.5em 1.75em 1.5em;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
  background: #282c34;
}
div[class*='language-'] {
  position relative
  &:before {
    position: absolute;
    top: 0.4em;
    right: 1em;
    font-size: .86em;
    color: #fff;
    z-index: 3;
  }
}

pre {
  code {
    margin: 0;
    padding: 0;
    background-color: transparent ;
    white-space: pre;
    font-size: .85em;
    font-weight: 400;
    color: #03A9F4;
    .token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin {
        color: #C678DD;
    }
    .token.boolean, .token.number, .token.function {
        color: #61AFEF;
    }
    .token.punctuation {
        color: #FFD700;
    }
    .token.attr-name,.token.deleted,.token.namespace,.token.tag {
      color: #e06c75;
    }
    .token.attr-value,.token.char,.token.regex,.token.string,.token.variable {
      color: #69B779;
    }
    .token.property {
      color: #E2DDDD
    }
    .token.function-variable.function {
      color: #49f581;
    }
    .token.function-name {
        color: #6196cc
    }
    .token.operator {
      color: #DA6FBC;
    }
    .token.boolean,.token.function,.token.number {
      color: #f08d49;
    }
    .token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog {
      color: #999
    }   

    &:before, &:after {
      content: '';
      letter-spacing: 0;
    }
  }
}
  
for type, exts in $code-languages
  div
    &.language-{exts[0]}:before
      content type
    if exts[1]
      &.language-{exts[1]}:before
        content type

blockquote {
  margin 2em 0 2em 0
  color #dad7d7
  border-left .5em solid $primary-color
  padding: 1.25rem 1.5rem;
  background-color: #282c34;
  font-size: 15px;
  border-radius: 4px;
  p {
    margin-top: 0
    &:last-child {
      margin-bottom: 0

    }
    code {
      background-color $primary-color
      padding: 3px 5px;
      border-radius: 3px;
      color: #000;
      vertical-align: bottom;
      }
  }
  footer {
    font-size 80%
  }
}

strong {
  font-weight: 600;
  margin: 0 0.2em;
}

ol, ul {
  padding-left: 2em;
}

table {
  width: 100%;
  border: 1px solid #dedede;
  border-collapse: collapse;
  border-spacing: 0;

  thead {
    tr {
      background: #f6f8fa;
    }
  }

  tbody {
    tr {
      &:hover {
        background: #efefef;
      }
    }
  }

  td, th {
    border: 1px solid #dedede;
    padding: .375em .75em;
    text-align: center !important;
  }
}

video, audio {
  max-width: 100%;
}

.highlighted-line {
  display: block;
  margin: 0 -1.5rem;
  padding: 0 1.5rem;
  background-color: rgba(0, 0, 0, 66%);
}

*:first-child {
  margin-top 0
}